<template>
    
    <!-- 组件的模板 -->
    <div class="page attendance-set show-footerBtn">
        <inline-calendar 
            :selector-array.sync="list" 
            :weeks-list="weeksData"
            :custom-slot-fn="customFn"
            :value.sync="curDateValue"
            :set-month="setMonth"
            :set-year="setYear"
            :month.sync="ourMonth"
            :year.sync="ourYear" 
            :start-date="startDate"
            :end-date="endDate"
            >
        </inline-calendar>
        <div class="btn-box bg-color fixed" @click="submit"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
    </div>
        
</template> 

<script>
    let yearData = {
        data1: [],
    }
    let y = 2000
    while(y < 2100){
        yearData.data1.push(y + '')
        y++
    }

    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi.js'
    import InlineCalendar from 'components/inline-calendar'
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
            InlineCalendar
        },
        data: function(){
            return{
                /*按天设置*/
                startDate:'',
                endDate:'',
                weeksData: ['日', '一', '二', '三', '四', '五', '六'],
                list:[],
                curDateValue: '',
                month: 0,
                year: 0,
                ourMonth: 0,
                ourYear: 0
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                cache.getMemoryCache('workDate', (data) => {
                    console.log(data)
                    if(data){
                       this.list = data
                    }
                })
                let date = new Date()
                this.startDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                this.endDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
            },  

            submit(){
                let date = new Date()
                let y = date.getFullYear()
                let m = date.getMonth() < 9 ? '0' + (date.getMonth()+1) : (date.getMonth()+1)
                let d = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
                let today = y + '-' + m + '-' + d
                
                let arr = []
                this.list.forEach ( (o) => {
                    if(o > today || o == today){
                        arr.push(o)
                    }
                })
                if(this.list.length){
                    commonPage.goBack(1,{'key':'workDate','value':arr.sort(),'pream':11})
                }else{
                    widget.toast('请选择日期')
                }
            },
           
/***********************************************按天设置**************************************/
            setMonth() {
                let data = {
                    data1: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                }
                let i = data.data1.indexOf($('.calendar-month-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(data, select, '选择月份', (res) => {
                    if(res.data1){
                        this.ourMonth = parseInt(res.data1)
                    }else{
                        this.ourMonth = this.ourMonth
                    }
                    
                })
            },
            setYear() {
                let i = yearData.data1.indexOf($('.calendar-year-txt.calendar-title').html())
                let select = [i]
                clientUi.showPicker(yearData, select, '选择年份', (res) => {
                    if(res.data1){
                        this.ourYear = parseInt(yearData.data1[res.data1])
                    }else{
                        this.ourYear = this.ourYear
                    }
                })
            }
        },
        created(){
            this.init();
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<!-- <style src="../../static/css/calendar.css"></style> -->
<style>
    /*!
 * Vux v0.1.3 (https://vux.li)
 * Licensed under the MIT license
 */
.vux-next-icon,.vux-prev-icon{position:absolute;left:0;top:15px;display:inline-block;width:12px;height:12px;border:1px solid #04be02;border-radius:0;border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg);margin-left:15px;line-height:40px}.vux-next-icon{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);left:auto;top:14px;right:15px}.vux-prev-icon:before{display:block;width:12px;height:12px;border:1px solid #04be02;border-width:1px 0 0 1px;-webkit-transform:rotate(315deg);transform:rotate(315deg)}.is-weekend-highlight td.is-week-0,.is-weekend-highlight td.is-week-6,.is-weekend-highlight td.is-week-list-0,.is-weekend-highlight td.is-week-list-6{color:#e59313}.inline-calendar a{text-decoration:none;tap-highlight-color:transparent}.calendar-month,.calendar-year{position:relative}.calendar-header{line-height:40px;font-size:1.2em;overflow:hidden}.calendar-header>div{float:left;width:50%;text-align:center;overflow:hidden}.calendar-header a:last-of-type{float:right;vertical-align:bottom}.calendar-title,.switch-btn{display:inline-block;border-radius:4px;line-height:30px}.switch-btn{width:30px;margin:5px;color:#39b5b8;font-family:SimSun}.calendar-title{padding:0 6%;color:#333}.calendar-header a.active,.calendar-title:active,.switch-btn:active{background-color:#39b5b8;color:#fff}.calendar-week{overflow:hidden}.calendar-week span{float:left;width:14.28%;font-size:1.6em;line-height:34px;text-align:center}.inline-calendar{width:100%;background:#fff;border-radius:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.inline-calendar td.is-today,.inline-calendar td.is-today.is-disabled{color:#04be02}.calendar-enter,.calendar-leave{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}.calendar:before{top:-10px;border-bottom-color:#dedede}.calendar:after,.calendar:before{position:absolute;left:30px;content:"";border:5px solid transparent}.calendar:after{top:-9px;border-bottom-color:#fff}.calendar-tools{height:32px;font-size:20px;line-height:32px;color:#04be02}.calendar-tools .float.left{float:left}.calendar-tools .float.right{float:right}.calendar-tools input{font-size:20px;line-height:32px;color:#04be02;width:70px;text-align:center;border:none;background-color:transparent}.calendar-tools>i{margin:0 16px;line-height:32px;cursor:pointer;color:#707070}.calendar-tools>i:hover{color:#5e7a88}.inline-calendar table{clear:both;width:100%;border-collapse:collapse;color:#444}.inline-calendar td{padding:5px 0;text-align:center;vertical-align:middle;font-size:16px;position:relative}.inline-calendar td.is-disabled,.inline-calendar td.week{pointer-events:none!important;cursor:default!important}.inline-calendar td.is-disabled{color:silver}.inline-calendar td>span{display:inline-block;width:26px;height:26px;line-height:26px;border-radius:50%;text-align:center}.vux-calendar-range.inline-calendar td.current{background-color:#04be02}.vux-calendar-range table{margin-bottom:10px}.inline-calendar td.current>span{background-color:#04be02;color:#fff}.inline-calendar .timer{margin:10px 0;text-align:center}.inline-calendar .timer input{border-radius:2px;padding:5px;font-size:14px;line-height:18px;color:#5e7a88;width:50px;text-align:center;border:1px solid #efefef}.inline-calendar .timer input:focus{border:1px solid #5e7a88}.calendar-button{text-align:center}.calendar-button button{border:none;cursor:pointer;display:inline-block;min-height:1em;min-width:8em;vertical-align:baseline;background:#5e7a88;color:#fff;margin:0 .25em 0 0;padding:.8em 2.5em;font-size:1em;line-height:1em;text-align:center;border-radius:.3em}.calendar-button button.cancel{background:#efefef;color:#666}.vux-popup{border-top:2px solid #04be02}.vux-popup-dialog{position:fixed;left:0;bottom:0;width:100%;background:#eee;z-index:101;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s}.vux-popup-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;tap-highlight-color:transparent;z-index:-1}.vux-popup-mask.vux-popup-show{opacity:1;z-index:100;-webkit-transition:opacity .3s;transition:opacity .3s}.vux-popup-enter,.vux-popup-leave{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.vux-tap-active{tap-highlight-color:transparent}.vux-tap-active:active{background-color:#ececec}.weui_cell{position:relative}.weui_cell:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #d9d9d9;color:#d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);left:15px}.weui_cell:first-child:before{display:none}.weui_cells{margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px;overflow:hidden;position:relative}.weui_cells:before{top:0;border-top:1px solid #d9d9d9;-webkit-transform-origin:0 0;transform-origin:0 0}.weui_cells:after,.weui_cells:before{content:" ";position:absolute;left:0;width:100%;height:1px;color:#d9d9d9;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.weui_cells:after{bottom:0;border-bottom:1px solid #d9d9d9;-webkit-transform-origin:0 100%;transform-origin:0 100%}.weui_cells_title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#888;font-size:14px}.weui_cells_title+.weui_cells{margin-top:0}.weui_cells_tips{margin-top:.3em;color:#888;padding-left:15px;padding-right:15px;font-size:14px}.weui_cell{padding:10px 15px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.weui_cell_ft{text-align:right;color:#888}.weui_cell_primary{-webkit-box-flex:1;-ms-flex:1;flex:1}.weui_cell_bd>p{color:#000}.weui_cell_ft.with_arrow:after{content:" ";display:inline-block;-webkit-transform:rotate(45deg);transform:rotate(45deg);height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;position:relative;top:-1px;margin-left:.3em}.vux-label-desc{font-size:14px;color:#666}
</style>
<!-- <style src="../../static/css/common.css"></style> -->
<style>
    html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;   
    font-size: 14px;
    background: #f2f2f2;
    color: #333;
}
html, body {
    height: 100%;
}
input, textarea, select, button {
    font-size: 16px;
    font-family: "Helvetica Neue", "Microsoft Yahei", sans-serif;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
}
textarea {
    resize: none;
}
::-webkit-input-placeholder {
    color: #ccc;
}
ol, ul {
    list-style: none;
}
a {
    color: #333;
}
em {
    font-style: normal;
}
.page {
    overflow: hidden;
    min-height: 100%;
    box-sizing: border-box;
}
.page.show-navbar {
    padding-top: 40px;
}
.page.show-tabbar {
    padding-bottom: 44px;
}
.page.show-footerBtn {
    padding-bottom: 64px;
}
.red-dot {
    display: inline-block;
    min-width: 18px;    
    height: 18px;   
    line-height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #f40;
    font-size: 12px;
    color: #fff;
    border-radius: 9px;
}
.touch {
    background: #fff;
}
.touch:active {
    background: #fafafa !important;
}
.mod-btn-box {
    padding: 30px 20px;
}
.link-access {
    position: relative;
}
.link-access::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 12px;
    top: 50%;
    margin: -4px 2px 0 0;
}
.bg_sprite, .hierarchy::before, .btn_add::before {
    display: inline-block;
    background-image: url(../../static/imgs/sprite.png);
    background-repeat: no-repeat;
    -webkit-background-size: 250px auto;
    background-size: 250px auto;
}
.bg-color {
    background: #fff !important;
}
.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
}

/* reset weui */
.weui-cells__title {
    color: #bbb;
    margin: 0;
    line-height: 20px;
    padding: 14px 12px 6px;
}
.weui-cells__title span {
    margin-right: 14px;
}
.weui-cells {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 12px;   
}
.searchbar + .weui-cells {
    margin-top: -1px;
}
.weui-cells:before, .weui-cells:after, .weui-cell:before, .weui-actionsheet__cell:before {
    border-color: #e5e5e5;
}
.weui-cell {
    padding: 12px;
}
.weui-cell:before {
    left: 12px;
}
.weui-cells_form .weui-cell__ft {
    line-height: 0;
}
.weui-cells_checkbox .weui-cell:before {
    left: 47px;
}
.weui-cell_select {
    padding: 0;
}
.weui-cell_select-after {
    padding-left: 12px;
}
.weui-select {
    height: 48px;
    line-height: 48px;
}
.weui-cell_select .weui-cell__bd:after {
    right: 12px;
}
.weui-cell_access:active, .weui-actionsheet__cell:active, .weui-dialog__btn:active, .weui-cells_checkbox .weui-cell:active {
    background-color: #fafafa;
}
.weui-cell__bd {
    overflow: hidden;
}
.weui-cell__bd p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.weui-cell__bd .title, .weui-label {
    color: #999;
    display: inline-block;
    width: auto;
    min-width: 64px;
    margin-right: 18px;
}
.weui-cell__bd .placeholder {
    color: #ccc;
}
.weui-input {
    height: 1.5em;
    line-height: 1.5;
}
.weui-btn {
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 2px;
}
.weui-btn_primary {
    background-color: #fa0;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
    background-color: #f90;
}
.weui-btn_disabled.weui-btn_primary {
    background-color: rgba(255, 170, 0, 0.4);
}
.weui-btn_disabled.weui-btn_primary.fixed {
    background: #fd9;
}
.weui-btn_primary:after, .weui-btn_warn:after {
    display: none;
}
.weui-btn.fixed {
    position: fixed;
    z-index: 99;
    width: 100%;
    border-radius: 0;
    left: 0;
    bottom: 0;
}
.weui-btn.fixed::after {
    display: none;
}
.weui-cells_radio .weui-check:checked + .weui-icon-checked:before, .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
    color: #fa0;
}
.weui-tabbar {
    position: fixed;
}
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    color: #fa0;
}
.weui-search-bar__cancel-btn {
    color: #333;
    font-size: 16px;
}
.weui-cell_switch {
    padding: 8px 12px;
}
.weui-switch:checked {
    background-color: #fa0;
    border-color: #fa0;
}
.weui-mask {
    background: rgba(0, 0, 0, 0.5);
}
.weui-dialog__hd {
    font-size: 18px;
    line-height: 24px;
    padding: 25px 18px 10px;
}
.weui-dialog__bd {
    font-size: 16px;
    line-height: 22px;
    min-height: 0;
    padding: 0 18px 15px;
}
.weui-dialog__bd:first-child {
    padding: 25px 18px 15px;
    color: #999;
}
.weui-cell__ft {
    color: #bbb;
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    min-height: 24px;
    box-sizing: border-box; 
}
.weui-cell__ft span {
    margin-right: 10px;
}
.weui-cell__ft span:last-child {
    margin-right: 0;
}
.weui-dialog__ft:after, .weui-dialog__btn:after {
    border-color: #e5e5e5;
}
.weui-dialog__btn_default {
    color: #999;
}
.weui-dialog__btn_primary {
    color: #333;
}
.searchbar {
    position: relative;
}
.weui-search-bar {
    background-color: #f2f2f2;
}
.weui-search-bar::before, .weui-search-bar::after {
    border-color: #e5e5e5;
}
.weui-search-bar__label, .weui-icon-search {
    color: #ccc;
}
.weui-search-bar__label {
    line-height: 26px;
}
.searchbar-result {
    width: 100%;
    font-size: 14px;
    margin-top: 0;
    position: absolute !important;
    left: 0;
    top: 44px;
    z-index: 10;
}
.searchbar-result .keyword {
    color: #fa0;
}
.weui-cells_checkbox .weui-cell__hd {
    padding-right: 0;
}
[class^="weui-icon-"]:before, [class*=" weui-icon-"]:before {
    margin: 0 12px 0 0;
}
.weui-icon-search:before, .weui-icon-clear:before, .weui-cells_radio .weui-icon-checked::before {
    margin: 0;
}
.weui-textarea-counter {
    font-size: 14px;
    color: #999;
}
/* .weui-textarea-counter span {
    color: #535353;
} */

/* mod-tabs */
.mod-tabs {
    display: -webkit-box;
    display: flex;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(234, 233, 233, 0.5);
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}
.mod-tabs li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
}
.mod-tabs a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 0.9);
}
.mod-tabs a.current {
    color: rgb(102, 102, 102);
    box-shadow: 0 -2px 0 rgb(255, 187, 0) inset;
    font-weight: bold;
}

/* border */
[class*="com-border-"] {
    position: relative;
    overflow: hidden;
}
.com-border-top::before, .com-border-bottom::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(229, 229, 229);   
    left: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);  
    z-index: 9;
}
.com-border-top::before {
    top: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.com-border-bottom::after {
    bottom: 0;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.com-border-outside::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(229, 229, 229);
    box-sizing: border-box;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}
[class*="com-border-"].ml::before, [class*="com-border-"].ml::after {
    left: 12px;
}

/* upload pic */
.upload-pic {
    background: #fff;
    padding: 15px 0 8px 12px;
    overflow: hidden;
    position: relative;
}
.upload-pic h2 {    
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #999;
    margin-bottom: 20px;
}
.upload-pic .pic-list {
    overflow: visible;
}
.upload-pic .pic-list li {
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
}
.upload-pic .pic-list img {
    display: block;
    width: 60px;
    height: 60px;
}
.upload-pic .btn-delete {
    width: 18px;
    height: 18px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: -10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.upload-pic .btn-delete::before, .upload-pic .btn-delete::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 1px;
    left: 50%;
    top: 50%;
}
.upload-pic .btn-delete::before {
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
}
.upload-pic .btn-delete::after {
    width: 2px;
    height: 10px;
    margin: -5px 0 0 -1px;
}
.uploader {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 12px 12px 0;
    position: relative;
    background: #fff;
}
.uploader.disabled {
    opacity: 0.4;
}
.uploader input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    outline: none;
    opacity: 0;
}
.uploader div::before, .uploader div::after {
    content: "";
    position: absolute;
    background: rgb(204, 204, 204);
    left: 50%;
    top: 50%;
    border-radius: 2px;
}
.uploader div::before {
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
}
.uploader div::after {
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
}
.uploader::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* calendar */
.inline-calendar {
    overflow: hidden;
}
.inline-calendar table {
    color: #333;
    margin-bottom: 5px;
}
.calendar-header {
    font-size: 16px;
    line-height: normal;
    text-align: center;
}
.calendar-header > div {
    line-height: 22px;
    padding: 16px 22px 6px;
    float: none;
    width: auto;
    display: inline-block;
    position: relative;
    margin: 0 10px;
}
.calendar-title {
    line-height: inherit;
    padding: 0 20px;    
}
.calendar-title:active {
    background: transparent;
    color: #333;
}
.vux-prev-icon, .vux-next-icon {
    width: 22px;
    height: 22px;
    border: none;   
    margin: 0;
    -webkit-transform: none;
    transform: none;
    top: 16px;  
}
.vux-next-icon {
    right: 0;
}
.vux-prev-icon::after, .vux-next-icon::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-width: 0 0 2px 2px;
    border-style: solid;
    border-color: #fa0;
    left: 50%;
    top: 50%;
    margin-top: -4px;
}
.vux-prev-icon::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -3px;
}
.vux-next-icon::after {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: -6px;
}
.inline-calendar th {
    font-size: 12px;
    color: #ccc;
    padding: 5px 0;
}
.inline-calendar td {
    font-size: 14px;
}
.inline-calendar td > span {
    width: 27px;
    height: 27px;
    line-height: 27px;  
}
.inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled {
    color: #fa0;
}
.inline-calendar td.current > span, .inline-calendar td.selected > span {   
    background-color: rgba(255, 170, 0, 0.1);
    color: #333;
    position: relative;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after, .inline-calendar td::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.inline-calendar td.green::after, .inline-calendar td::after {
    width: 5px;
    height: 5px;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}
.inline-calendar td.green::after {
    background: #89c16c;
}
.inline-calendar td.red::after {
    background: #f38355;
}
.inline-calendar td.current > span::after, .inline-calendar td.selected > span::after { 
    width: 200%;
    height: 200%;
    border: 1px solid #fa0;
    box-sizing: border-box; 
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.inline-calendar td.current::after {
    display: none;
}

/* tabbar */
.tabbar {
    width: 100%;    
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
}
.tabbar ul {
    display: -webkit-box;
    display: flex;
}
.tabbar li {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
}
.tabbar a {
    display: block;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #aaa;
}
.tabbar li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 22px;
    background: #e5e5e5;
    -webkit-transform: scale3d(0.5, 1, 1);
    transform: scale3d(0.5, 1, 1);
    right: 0;
    top: 11px;
}
.tabbar li:last-child::after {
    display: none;
}
.tabbar .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: rgb(221, 222, 226);
    margin-right: 8px;
}
.tabbar a span {
    vertical-align: middle;
}
.tabbar .current .icon {
    background-color: rgb(255, 170, 0);
}
.tabbar::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1, 0.5, 1);
    transform: scale3d(1, 0.5, 1);
}

/* toast */
.mod-toast {
    width: 100%;
    padding: 0 75px;
    box-sizing: border-box;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    z-index: 9999;
}
.mod-toast p {
    display: inline-block;
    background: rgba(17, 17, 17, 0.7);
    padding: 32px 24px; 
    font-size: 16px;
    line-height: 22px;  
    color: #fff;
    border-radius: 5px;
}

/* button */
[class*="mod-btn-s-"] {
    display: inline-block;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border-radius: 2px;
    position: relative;
}
[class*="mod-btn-s-"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mod-btn-s-1 {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.mod-btn-s-1::after, .mod-btn-s-3.selected::after {
    display: none;
}
.mod-btn-s-1:active {
    background: rgb(255, 153, 0);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-1.disabled {
    background: rgba(255, 170, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
}
.mod-btn-s-2 {
    background: rgb(248, 248, 248);
    color: rgb(53, 53, 53);
}
.mod-btn-s-2::after {
    border-color: rgba(5, 5, 5, 0.1);
}
.mod-btn-s-2:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(53, 53, 53, 0.6);
}
.mod-btn-s-3 {  
    color: rgb(255, 170, 0);
}
.mod-btn-s-3::after {
    border-color: rgb(255, 170, 0);
}
.mod-btn-s-3:active {   
    color: #fc6;
}
.mod-btn-s-3:active::after {
    color: #fc6;
}
.mod-btn-s-3.disabled {
    color: rgb(204, 204, 204);
}
.mod-btn-s-3.disabled::after {
    border-color: rgb(204, 204, 204);
}
.mod-btn-s-3.selected {
    background: rgb(255, 170, 0);
    color: rgb(255, 255, 255);
}
.btn-box.fixed {
    padding: 9px 10px 10px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    z-index: 99;
}

/* empty */
.mod-empty {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    margin-top: -30px;
}
.mod-empty .icon {
    display: block;
    width: 115px;
    height: 115px;
    margin: 0 auto 10px;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.mod-empty .icon_1 {    
    background-image: url(../../static/imgs/icons/icon_1.png);
}
.mod-empty .icon_2 {    
    background-image: url(../../static/imgs/icons/icon_2.png);
}
.mod-empty .icon_3 {    
    background-image: url(../../static/imgs/icons/icon_3.png);
}
.mod-empty .icon_4 {    
    background-image: url(../../static/imgs/icons/icon_4.png);
}
.mod-empty .tip {   
    color: #999;
    font-size: 16px;
    line-height: 22px;
}
.mod-empty .tip_2 {
    font-size: 12px;
    line-height: 16px;
    color: #ccc;
    margin-top: 10px;
}
.mod-empty .weui-btn {
    width: 150px;
    margin-top: 35px;
}

/* crumbs nav */
.mod-crumbs {
    height: 44px;
    line-height: 44px;
    padding-left: 16px;
    background: #fafafa;
    color: #bbb;
}
.mod-crumbs .arrow {
    margin: 0 8px;
    font-family: "Simsun";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #bbb;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    text-indent: -9999px;
}
.mod-crumbs a {
    color: #f09835;
}
.mod-crumbs a, .mod-crumbs span {
    vertical-align: middle;
}

/* avatar box */
.avatar-box {
    float: left;    
    position: relative;
}
.avatar-box .cover {    
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    left: 0;
    top: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

</style>
<!-- <style src="../../static/css/attendance-set.css"></style> -->
<style>
    .weui-label {
    color: #333;
}
.weui-cell__bd .tip {
    color: #aaa;
    font-size: 13px;
    margin-left: 4px;
}
.block {
    display: block;
}
.add-team {
    overflow: hidden;
    padding: 0 0 6px 12px;
}
.add-team .team {
    float: left;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    background: rgba(255, 190, 106, 0.1);
    border-radius: 2px;
    font-size: 14px;
    color: #fa0;    
    margin: 0 10px 12px 0;
}
.add-team .button {
    float: left;
    width: 36px;
    height: 36px;
    /* border: 1px solid rgba(255, 170, 0, 0.7); */
    border: 1px solid #bbb;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 12px;
}
.add-team .button::before, .add-team .button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    /* background: #fa0; */
    background: #bbb;
}
.add-team .button::before {
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
}
.add-team .button::after {
    width: 2px;
    height: 16px;
    margin: -8px 0 0 -1px;
}
.attendance-set .btn_add {
    display: block;
    height: 48px;
    line-height: 48px;
    color: #fa0;
    text-align: center;
}
.attendance-set .btn_add::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-position: -63px -23px;
    margin-right: 6px;
    vertical-align: middle;
}
.attendance-set .btn_add span {
    vertical-align: middle;
}
.weui-cell_access .weui-cell__ft.down:after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.weui-cell_access .weui-cell__ft.up:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.page.show-footerBtn {
    padding-bottom: 76px;
}
.item-content { 
    margin-top: -1px;   
}
.item-content li {
    padding: 12px 40px 12px 30px;
    background: #fff;
}
.item-content h3 {
    color: #888;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 4px;
}
.item-content p {
    color: #bbb;
    line-height: 22px;  
}
.item-content h3, .item-content p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-content li:not(:last-child)::after {
    left: 30px;
}
.item-content .icon_location {
    position: absolute;
    width: 11px;
    height: 14px;
    background-position: -17px -513px;
    left: 12px;
    top: 16px;
}
.item-content .btn_delete {
    position: absolute;
    width: 18px;
    height: 18px;
    background-position: -46px 0;
    right: 12px;
    top: 50%;
    margin-top: -9px;
}
.weui-cells.sub-option {
    margin-top: 0;  
}
.weui-cells.sub-option .weui-cell {
    padding-left: 30px;
}
.weui-cells.sub-option .weui-cell::before {
    left: 30px;
}
.weui-cells.sub-option::before {
    display: none;
}
.weui-cells.option-set::after {
    left: 12px;
}
.attendance-set .section {
    margin-top: 12px;
}
.mod-set {
    padding: 16px 12px;
}
.mod-set .top {
    overflow: hidden;
    margin-bottom: 20px;
}
.mod-set h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
}
.mod-set .tabs {
    float: right;
}
.mod-set .tabs li {
    float: left;
}
.mod-set .tabs a {
    float: left;
    width: 66px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #fa0;
    color: #fa0;
}
.mod-set .tabs .current {
    background: #fa0;
    color: #fff;
}
.mod-set .tip {
    font-size: 13px;
    line-height: 18px;
    text-align: right;
    color: #aaa;
}
.mod-set + .weui-cells, .title-bar + .weui-cells {
    margin-top: 0;
}
.week-list {
    padding: 18px 6px 3px;
    overflow: hidden;
}
.week-list li {
    float: left;
    width: 20%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.week-list span {
    display: block;
    height: 35px;
    line-height: 35px;
    background: #f6f6f6;
    border-radius: 1px;
    text-align: center;
    font-size: 14px;
    color: #888;
    position: relative;
}
.week-list::before {
    left: 12px;
}
.week-list .selected::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: url(../../static/imgs/icon_selected.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    right: 0;
    top: 0;
}
.title-bar {
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
}
.title-bar h2 {
    float: left;
    font-size: 16px;
    font-weight: normal;
    color: rgb(189, 192, 199);
}
.title-bar .btn_delete {
    position: absolute;
    width: 22px;
    height: 22px;
    background-position: 5px -627px;
    right: 10px;
    top: 13px;
}
.section + .btn_add {
    margin-top: 12px;
}
.weui-check__label + .upload-pic {
    padding: 8px 0 6px 47px;
    overflow: visible;
}

</style>

<style>
    
</style>






